// ./pages/HomePage.js
import React, { useState, useEffect, useContext  } from 'react';
import { Table, Tag, Button, Popconfirm, message,Space, Pagination, Form, Input, Select,DatePicker, Modal, Row, Col, TreeSelect, Radio,Tree,InputNumber    } from 'antd';
import icons from './requireIcons'
import SvgIcon from '../svgIcon';
function IconSelect(props) {
    const [options, setOptions] = useState(icons);
    const onChange = (value) => {
        if(props.onChange){
            props.onChange(value);
        }
    }
  return (
    <div>
      <Select
        showSearch
        placeholder="请选择图标"
        optionFilterProp="children"
        filterOption={(input, option) =>{
          return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }}
        style={{ width: 200 }}
        onChange={onChange}
        value={props.value}
      >
        {options.map((item) => (
          <Select.Option key={item} value={item}>
            <Space>
            <SvgIcon iconName={item}/>
            <span >{item}</span>
            </Space>
          </Select.Option>
        )
        )}
      </Select>
    </div>
  );
}

export default IconSelect;